<mat-card class="my-4">
  <mat-card-header class="mat-elevation-z2 custom-card-header">
    <mat-card-title class="mat-h1"> Similar Books </mat-card-title>
  </mat-card-header>
  <mat-card-content class="p-3">
    <ng-container *ngIf="similarBooks$ | async as books; else loading">
      <div class="d-flex justify-content-start flex-wrap">
        <div *ngFor="let book of books" class="p-1">
          <app-book-card [book]="book"></app-book-card>
        </div>
      </div>
    </ng-container>
  </mat-card-content>
  <ng-template #loading>
    <div class="d-flex align-items-center justify-content-center">
      <mat-spinner></mat-spinner>
    </div>
  </ng-template>
</mat-card>
